<template>
  <el-container>
        <el-header align="center">
            在线考试
        </el-header>
        <el-main>
               <div align="center">
                    <p>
                      试卷名称:{{paper.paperName}}&nbsp;&nbsp;
                      试卷总分:{{paper.paperScore}}&nbsp;&nbsp;
                      试卷时长:{{paper.paperTime}}
                     </p>
                     <br>
               </div>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                      <span>一:单选题</span>
                 </div>
                 <div class="text item" v-for="(x,index) in signList">
                     <p>{{index+1}}:{{x.quContent}}</p>
                     <p>A:<input type="radio" value="A" :name="'s'+index"><span>{{x.quAoption}}</span></p>
                     <p>B:<input type="radio" value="B" :name="'s'+index"><span>{{x.quBoption}}</span></p>
                     <p>C:<input type="radio" value="C":name="'s'+index"><span>{{x.quCoption}}</span></p>
                     <p>D:<input type="radio" value="D":name="'s'+index"><span>{{x.quDoption}}</span></p>
                      <br>
                 </div>
              </el-card>

              <el-card class="box-card">
                <div slot="header" class="clearfix">
                      <span>二:多选题</span>
                 </div>
                 <div class="text item" v-for="(x,index) in moreList">
                     <p>{{index+1}}:{{x.quContent}}</p>
                     <p>A:<input type="checkbox" value="A"  :name="'m'+index"><span>{{x.quAoption}}</span></p>
                     <p>B:<input type="checkbox" value="B" :name="'m'+index"><span>{{x.quBoption}}</span></p>
                     <p>C:<input type="checkbox" value="C" :name="'m'+index"><span>{{x.quCoption}}</span></p>
                     <p>D:<input type="checkbox" value="D" :name="'m'+index"><span>{{x.quDoption}}</span></p>
                      <br>
                 </div>
              </el-card>

              <el-card class="box-card">
                <div slot="header" class="clearfix">
                      <span>三:判断题</span>
                 </div>
                 <div class="text item" v-for="(x,index) in judgeList">
                     <p>{{index+1}}:{{x.quContent}}</p>
                     <p>√:<input type="radio" value="√"  :name="'j'+index"><span>{{x.quAoption}}</span></p>
                     <p>×:<input type="radio" value="×"  :name="'j'+index"><span>{{x.quBoption}}</span></p>

                      <br>
                 </div>
              </el-card>

              <div align="center">
                <el-button type="success" size="mini" @click="submitPaper">提交试卷</el-button>
              </div>

        </el-main>
  </el-container>
</template>

<script>
  export default {
        name:"exam",
        data(){
          return{
              paperName:"java考试02",
              paper:{},//试卷信息
              signList:[],//单选题集合
              moreList:[],//多选题集合
              judgeList:[],//判断题集合
              answer:{
                  sa:"",//单选答案
                  ma:"",//多选答案
                  ja:""//判断题答案
              }

          }
        },
        methods:{
            showPaper(){ //在线考试
              var self = this;
              this.$http.get("/paper/showPaper",
                          { params:{"paperName":this.paperName}
                          }).then(function(rs){
                              self.paper= rs.data.data;

                              for(var i=0;i<self.paper.list.length;i++){
                                  //添加单选题集合
                                  if(self.paper.list[i].quType=="单选题"){
                                      self.signList.push(self.paper.list[i]);
                                  }else if(self.paper.list[i].quType=="多选题"){
                                      self.moreList.push(self.paper.list[i]);
                                  }else{
                                    self.judgeList.push(self.paper.list[i]);
                                  }
                              }

                          }).catch(function(rs){
                                console.log(rs);
                                self.$message("服务器连接错误");
                          })
            },
            submitPaper(){//提交试卷
                //获取单选题答案
                this.answer.sa ="";
                for(var i=0;i<this.signList.length;i++){
                    //属性选择器
                    this.answer.sa+=$("input[name='s"+i+"']:checked").val()+",";
                }
                console.log(this.answer.sa);
                ///获取判断题答案
                this.answer.ja ="";
                for(var i=0;i<this.judgeList.length;i++){
                    //属性选择器
                    this.answer.ja+=$("input[name='j"+i+"']:checked").val()+",";
                }
                console.log(this.answer.ja);

                //获取多选题答案
                 this.answer.ma ="";
                 for(var i=0;i<this.moreList.length;i++){
                       var an="";
                   //each遍历获取选中的复选框的所有值，
                      $("input[name='m"+i+"']:checked").each(function(){
                            an+=$(this).val();
                      })
                      //如果an等于空，说明用户没有做这到题
                      if(an==""){
                          this.answer.ma+="undefine"+",";
                      }else{
                         this.answer.ma+=an+",";
                      }

                  }
                  console.log(this.answer.ma);

                var self = this;
                this.$http.get("/paper/countScore",
                            { params:
                            {
                              "paperName":this.paperName,
                               "sa":this.answer.sa,
                               "ma":this.answer.ma,
                               "ja":this.answer.ja,
                            }
                            }).then(function(rs){
                                self.$alert("你的此次考试成绩是:"+rs.data.data);

                            }).catch(function(rs){
                                  console.log(rs);
                                  self.$message("服务器连接错误");
                            })

            },
            autoSubmit(){//自动提交试卷
                //计时器对象
                //setInterval(回调函数,间隔时间(毫秒))
                var self = this;
                var time = setInterval(function(){
                    self.paper.paperTime--;

                    if(self.paper.paperTime==5){
                        self.$message("你还有5秒钟做完试卷,5秒回自动提交试卷");
                    }else if(self.paper.paperTime==1){
                        self.$message("自动交接");
                        //提交试卷
                        self.submitPaper();
                        //清除计时器
                        clearInterval(time);
                    }
                },1000);
            }
        },
        mounted(){
          //加载试卷
          this.showPaper();
          //运行自动提交试卷
          this.autoSubmit();
        }
  }
</script>

<style>
</style>
